<template>
  <div>
    <input v-model="searchKey" type="text" @keydown.enter="searchEvent">
    <h1>{{ searchKey }}</h1>
    <textarea v-model="lineText" cols="30" rows="10"></textarea>
    <h1>{{ lineText }}</h1>

    <!-- 表单获取的是否选中内容 -->
    <input type="checkbox" name="'like" v-model="checkd">like
    <h1>{{ checkd }}</h1>
    <!-- 复选框 多个值的情况 -->
    <input type="checkbox" name="'likes" v-model="fruits" value="苹果">苹果
    <input type="checkbox" name="'likes" v-model="fruits" value="香蕉">香蕉
    <input type="checkbox" name="'likes" v-model="fruits" value="雪梨">雪梨
    <input type="checkbox" name="'likes" v-model="fruits" value="葡萄">葡萄
    <h1>{{ fruits }}</h1>

    <!-- 单选框 -->
    <input type="radio" name="sex" v-model="picked" value="man">
    <input type="radio" name="sex" v-model="picked" value="woman">
    <h1>{{ picked }}</h1>

    <!-- 选项框  下拉 单选 -->
    <select name="city" v-model="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
    </select>
    <h1>{{ city }}</h1>

    <!-- 选项框  下拉 多选 -->
    <select name="city" v-model="citys" multiple>
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
    </select>
    <h1>{{ citys }}</h1>

    <!-- 表单获取的是否选中   自定义内容 -->
    <input type="checkbox" name="'like" v-model="checkd1" true-value="喜欢" false-value="不喜欢">like
    <h1>{{ checkd1 }}</h1>

    <!-- 修饰符 -->
    <!-- .lazy 失去焦点后处理 -->
    <input v-model.lazy="searchKey" type="text" @keydown.enter="searchEvent">
    <h1>{{ searchKey }}</h1>

    <!-- .number 转成数字-->
    <input v-model.lazy.number="searchKey" type="text" @keydown.enter="searchEvent">
    <h1>{{ searchKey }}</h1>

    <!-- .trim 去两端空格-->
    <input v-model.trim="searchKey" type="text" @keydown.enter="searchEvent">
    <h1>{{ searchKey }}</h1>

  </div>
</template>

<script>
// 声明式
export default {
  name: 'App',
  data() {
    return {
      searchKey: '百度一下',
      lineText: '',
      checkd: '',
      fruits: [],
      picked: '',
      city: '',
      citys: [],
      checkd1: ''
    }
  },
  methods: {
    searchEvent() {
      console.log('执行了回车')
      console.log(this.searchKey)
    }
  }
}
</script>

<style>
.active {
  /*width: 100px;*/
  /*height: 100px;*/
  background-color: yellowgreen;
}

#d2 {
  width: 100px;
  height: 100px;
  background-color: blue;
}
</style>